
// import ReactDOM from 'react-dom'
import React, { Component } from 'react';
import SplashscreenStyled from './SplashscreenStyled'
import img from 'images/home/message/m_pic1@2x.png'

class Splashscreen extends Component {
  state = {
    
    title:'',
    infomation: '',
    // notHidden: false,
    showTime: 1000,
    display: 'none',
  }

  // 生命周期钩子
  componentDidMount(){
    this.props.tagRef(this)
  }

  // 自定义方法
  show = (prodata) => {
    // console.log(1,prodata)
    if(prodata){
      // debugger
      if(prodata.title){
        
        this.setState({  
          title: prodata.title,
        })
      }
      if(prodata.img){
        this.setState({  
          img: prodata.img,
        })
      }
      if(prodata.infomation){
        this.setState({  
          infomation: prodata.infomation,
        })
      }

      this.setState({  
        display: 'flex', 
      })

      if(prodata.notAutoHidden){
        // return 
      }else{
      
        if(prodata.showTime){
          // console.log(prodata.showTime)
          setTimeout(()=>{
            this.hidden()  
          },prodata.showTime)
        }else{
          setTimeout(()=>{
            this.hidden()
    
          },1000)
        }
      }
    }else{
      this.setState({  
        display: 'flex', 
      })
      setTimeout(()=>{
        this.hidden()
      },1000)
    }
  }

  hidden = (s) => {
    // console.log(s)
    this.setState({  
      display: 'none', 
    },()=>{
      this.props.didHiddenView("已经隐藏")
    })
  }

  // render方法放最后
  render() {
    // console.log(this.state.title,this.state.display)
    // this.props.display = this.state.display
    // console.log(this.props)
    return (
      <SplashscreenStyled {...this.props} 
      display={this.state.display}
      >
        <div className="splashwrap">

          {
            this.state.img ? <img src={this.state.img} alt=""/> : ''
          }
            
          {
            this.state.title ? <p className='title'>{this.state.title}</p> : ''
          }

          {
            this.state.infomation ? <p className='info'>{this.state.infomation}</p> : ''
          }
          
          {this.props.children}

        </div>
        
      </SplashscreenStyled>
    );
  }
}

export default Splashscreen;